<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
    <title>聊天室</title>
    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/layout.css">
    <!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
    <!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <script src="js/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
    <script src="/socket.io/socket.io.js"></script>
    
    <div class="container">
        <h4>chatroom群聊<span id="chat-count"></span></h4>

        <!-- 登录模块 -->
        <div class="row">
            <div class="col-md-12" id="login">
                <div class="form-group">
                    <label for="username">name:</label>
                    <input type="email" class="form-control" id="username" placeholder="please input your name">
                </div>
                <button class="btn btn-success" id="show-btn">加入群聊</button>
                    
            </div>
        </div>
        
        <!-- 聊天信息模块 -->
        <div class="row" id="content">
            <div class="col-md-12 content" id="chatcon">
                <!-- <div class="con-item">
                    <p><span class="label label-warning">james</span></p>
                    <p><span class="alert alert-warning" role="alert" style="padding: 5px;">my name is james</span></p>
                </div>

                <div class="con-item">
                    <p><span class="label label-success">kobe</span></p>
                    <p><span class="alert alert-success" role="alert" style="padding: 5px;">my name is kobe</span></p>
                </div> -->
            </div>
            <!-- 输入框模块 -->
            <div class="col-md-12" style="margin-top: 10px;">
                <textarea class="form-control" rows="1" style="width: 80%; float: left;" id="msgcon"></textarea>
                <button class="btn btn-success" style="width: 20%; float: left;" id="send-btn">发送</button>
            </div>
        </div>

        
        
        
    </div>


    <script>
        var socket;
        var unmae;
        // 创建模板template   data:{user:'',msg:''}
        function createTpl(data,flag){
            var str = '';
            if(flag == false){
                str +='<div class="con-item othermsg">'
                str +='<p><span class="label label-warning">'
                str +=data.user
                str +='</span></p>'
                str +='<p><span class="alert alert-warning" role="alert" style="padding: 5px;">'
                str +=data.msg
                str +='</span></p>'
                str +='</div>'
                return str;
            }else{
                str +='<div class="con-item mymsg">'
                str +='<p style="text-align: right"><span class="label label-success">'
                str += '我'
                str +='</span></p>'
                str +='<p><span class="alert alert-success" role="alert" style="padding: 5px;">'
                str +=data.msg
                str +='</span></p>'
                str +='</div>'
                return str;
            }
        }



        // 显示聊天
        $('#show-btn').on('click',function(){
            uname = $.trim($('#username').val());
            if(uname == '')
            {return;}
            $('#login').hide();
            $('#content').show();

            socket = io('ws://localhost:3000');
        // 监听服务器端事件推送
        socket.on('connect',function(){
            // 当客户端连接成功的时候，发送消息
            socket.emit('login',uname)
        });
        // 接受服务端消息，并显示
        socket.on('msg',function(data){
            // console.log(data);
            // flag表示是否是本人
            var flag = data.user == uname;

            var tpl = createTpl(data,flag)

            $("#chatcon").append(tpl)
        });
        socket.on('disconnect',function(){
            console.log('断开连接');
        });
        socket.on('count',function (data){
            $('#chat-count').html('('+data+')人');
        })
        })
        
        // 点击提交，发送消息到服务端
        $('#send-btn').on('click',function(){
            socket.emit('send',$('#msgcon').val());
            $('#msgcon').val('');
        })
    </script>
  </body>
</html>